<template>
  <div id="allDetail">
<!--    <div class="myDiv">-->
<!--      <el-dropdown trigger="click" style="float: right">-->
<!--        <span class="el-dropdown-link">-->
<!--          <el-button type="success">点我查看<i class="el-icon-caret-bottom el-icon&#45;&#45;right"></i></el-button>-->
<!--        </span>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-dropdown-item class="clearfix"> 我的帖子 </el-dropdown-item>-->
<!--          <el-dropdown-item class="clearfix"> 我的收藏 </el-dropdown-item>-->
<!--          <el-dropdown-item class="clearfix">-->
<!--            站内信-->
<!--            <el-badge class="mark" :value="3" />-->
<!--          </el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
<!--    </div>-->
    <div class="articleContainer">
      <div class="title">
        <b>{{ vote.voteTitle }}</b>
      </div>
      <div class="artInfoDiv">
        <span><i class="el-icon-document"></i>[{{ vote.section }}]</span>
        <span><i class="el-icon-user"></i>{{ vote.userId }}</span>
        <span><i class="el-icon-time"></i>{{ vote.date }}</span>
        <span><i class="el-icon-view"></i>{{ vote.status }}</span>
<!--        <span><i class="el-icon-chat-line-square"></i>1</span>-->
        <el-link :underline="false" @click="dialogShow">编辑</el-link>
<!--        <el-link :underline="false">收藏</el-link>-->
<!--        <el-link-->
<!--          :underline="false"-->
<!--          style="color: red"-->
<!--          @click="accuseFlag = true"-->
<!--        >举报</el-link>-->
<!--        <el-link-->
<!--          :underline="false"-->
<!--          style="color: red"-->
<!--          @click="punishFlag = true"-->
<!--        >处理</el-link>-->
      </div>
<!--      <div v-if="statusFlag" class="postStatus">-->
<!--        <img src="../../assets/articleStatus_pic/yizhihuan.gif">-->
<!--      </div>-->
      <div class="articleContent" v-html="vote.content"></div>
<!--      <div style="margin-left: 80px; margin-bottom: 20px">-->
<!--        <el-button type="warning" @click="linkGoodFlag = !linkGoodFlag">关联商品</el-button>-->
<!--      </div>-->
      <div
        style="margin-right: 100px;
          margin-left: 80px;
          font-size: 16px;
          word-spacing: 3px;
          padding-bottom: 15px;
          border-bottom: 1px solid #e0e2e4;">
        <span><i class="el-icon-pie-chart"></i>投票结果：</span>
        <div v-for="option in voteOptions" :key="option.optionId" style="margin-bottom: 20px">
          <span style="margin-top: 10px; margin-bottom: 10px">{{ option.optionTitle }}：</span>
          <!--            :src="require('../../assets/images/'+option.optionPic)"-->
          <el-image
            style="width: 50px; height: 50px"
            :src="option.optionPic"
            fit="contain"
          ></el-image>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="option.num/voteCount*100 | numFilter"></el-progress>
        </div>
        <span @click="showVoteDetail">
          <i v-if="!voteDetail" class="el-icon-caret-bottom"></i>
          <i v-if="voteDetail" class="el-icon-caret-top"></i>
          投票详情：</span>
        <div v-if="voteDetail" style="margin-top: 10px; margin-bottom: 10px">
          <el-table
            ref="multipleTable"
            :data="voteResults"
            element-loading-text="拼命加载中"
            border
            fit
            highlight-current-row
          >
            <el-table-column align="center" label="投票人Id" min-width="10%">
              <template slot-scope="scope">
                {{ scope.row.userId }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="投票人姓名" min-width="10%">
              <template slot-scope="scope">
                {{ scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="投票选项" min-width="10%">
              <template slot-scope="scope">
                {{ scope.row.option.optionTitle }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="投票时间" min-width="10%">
              <template slot-scope="scope">
                {{ scope.row.date }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-card>
      <div>
        <el-row>
          <el-button
            type="primary"
            @click="gotobuttom"
          ><i class="el-icon-s-promotion"></i><span>评论</span></el-button>
<!--          <el-pagination-->
<!--            :current-page.sync="currentPage3"-->
<!--            :page-size="100"-->
<!--            layout="prev, pager, next, jumper"-->
<!--            :total="1000"-->
<!--            style="float: right"-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--          />-->
        </el-row>
      </div>
    </el-card>
    <div class="card">
      <div class="cardHeader">
        <strong>{{ commentsList.length }}回复</strong>
      </div>
      <div v-for="com in commentsList" :key="com.helpVoteComment1.commentId" class="comments">
        <!-- 单个comment div -->
        <div>
          <el-row>
            <el-col :span="1">
              <div>
                <el-avatar> user </el-avatar>
              </div>
            </el-col>
            <el-col :span="22">
              <div>
                <el-row>
                  <a style="width: 100%;" class="username">{{
                    com.helpVoteComment1.userName
                  }}</a>
                  <span id="cid">#{{ com.helpVoteComment1.commentId }}</span>
                </el-row>
                <el-row>
                  <span id="codate">{{ com.helpVoteComment1.date }}</span>
                  <el-link
                    :disabled="com.helpVoteComment1.change"
                    style="font-size: 12px; margin-left: 10px"
                    @click="comment2InputFlag = true"
                  >回复</el-link>
                  <el-link
                    :disabled="com.helpVoteComment1.change"
                    style="font-size: 12px; margin-left: 10px"
                    @click="deleteComment1(com.helpVoteComment1.commentId)"
                  >删除</el-link>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!-- 评论没有没删除就显示内容 -->
          <div v-show="!com.helpVoteComment1.change" class="message">
            {{ com.helpVoteComment1.content }}
          </div>
          <!-- 评论被删除时显示 -->
          <div v-show="com.helpVoteComment1.change" id="deleteCommentDiv">
            该评论已被删除
          </div>
          <div
            v-if="com.helpVoteComment2List != null"
            class="comment_in_comment"
          >
            <!-- 子评论 -->
            <div
              v-for="childComment in com.helpVoteComment2List"
              :key="childComment.commentId"
              class="childComment"
            >
              <el-row>
                <el-col :span="1">
                  <div>
                    <el-avatar
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    >
                      user
                    </el-avatar>
                  </div>
                </el-col>
                <el-col :span="22" style="margin-left: 10px">
                  <div>
                    <el-row>
                      <a style="width: 300px;" class="username">{{
                        childComment.userName
                      }}</a>
<!--                      <span style="margin: 0 3px; font-size: 14px">@</span>-->
<!--                      <a style="width: 300px;" class="username">{{-->
<!--                        childComment.reply_to_username-->
<!--                      }}</a>-->
                    </el-row>
                    <el-row>
                      <span id="cdate">{{ childComment.date }}</span>
<!--                      <el-link-->
<!--                        style="font-size: 12px; margin-left: 10px"-->
<!--                        @click="childComment.c_in_c_editorFlag = true"-->
<!--                      >回复</el-link>-->
                      <el-link
                        style="font-size: 12px; margin-left: 10px"
                        @click="deleteComment2(childComment.commentId)"
                      >删除</el-link>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
              <div class="c_in_c">
                {{ childComment.content }}
              </div>
              <!-- 子评论回复框 -->
              <div v-show="childComment.c_in_c_editorFlag">
                <el-input
                  :placeholder="replyTo(childComment.username)"
                  style="width: 70%; padding-left: 57px"
                />
                <el-button type="primary" style="margin-left: 10px">
                  评论
                </el-button>
                <el-button
                  @click="childComment.c_in_c_editorFlag = false"
                >收起</el-button>
              </div>
            </div>
          </div>
          <!-- 层主回复框 -->
          <div
            v-if="comment2InputFlag"
            :id="generateId(com.helpVoteComment1.commentId)"
            style="margin-top: 10px"
          >
            <el-input
              v-model="newComment2Data.content"
              placeholder="给楼主评论"
              style="width: 70%; padding-left: 57px"
            />
            <el-button type="primary" style="margin-left: 10px" @click="addComment2(com.helpVoteComment1.commentId)">
              评论
            </el-button>
            <el-button
              @click="comment2InputFlag = false"
            >收起</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="editorCard">
      <div class="editorContainer">
<!--        <quill-editor-->
<!--          v-model="comment"-->
<!--          :options="editorOption"-->
<!--          @blur="onEditorBlur($event)"-->
<!--          @focus="onEditorFocus($event)"-->
<!--          @ready="onEditorReady($event)"></quill-editor>-->
          <tinymce v-model="newComment1Data.content"></tinymce>
      </div>

      <div class="submit">
        <el-button
          type="primary"
          style="float: right"
          @click="addComment1"
        ><i class="el-icon-s-promotion"></i><span>提交 </span></el-button>
        <br style="clear: both">
      </div>
    </div>
    <el-dialog title="关联商品" :visible.sync="linkGoodFlag" center width="50%">
      <table id="dialogGoodsTable">
        <tr>
          <td style="width: 25%">商品ID：</td>
          <td>
            <el-input v-model="goodId" placeholder="请输入商品id" @input="showGoodDetail" />
          </td>
        </tr>
        <tr>
          <td style="width: 10%">商品名称：</td>
          <td style="vertical-align: center">{{ goodDetail.name }}</td>
        </tr>
        <tr>
          <td style="width: 10%">商品数量：</td>
          <td style="vertical-align: center">{{ goodDetail.num }}</td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="linkGoodFlag = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出的编辑界面 -->
<!--    已经发布的需求不能增加和删除投票项，只能修改投票项；也不能修改分类-->
    <el-dialog title="修改需求" :visible.sync="editFlag" center width="70%">
      <table id="dialogTable">
        <tr>
          <td style="width: 10%">标题：</td>
          <td>
            <el-input v-model="vote.voteTitle" placeholder="请输入标题" />
          </td>
        </tr>
        <tr>
          <td style="width: 10%">状态：</td>
          <td>
            <el-select v-model="vote.status" placeholder="请选择帖子状态">
              <el-option
                v-for="(option, index) in statusOptions"
                :key="index"
                :value="option.value"
                :label="option.label"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td style="width: 10%">所属板块：</td>
          <td>
            <el-select v-model="vote.section" placeholder="请选择帖子板块">
              <el-option
                v-for="section in sections"
                :key="section.sectionId"
                :value="section.sectionName"
                :label="section.sectionName"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td style="width: 10%">内容：</td>
          <td width="800px">
            <div>
              <tinymce v-if="editFlag" v-model="vote.content"></tinymce>
            </div>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary" @click="editVote">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import tinymce from '@/components/Tinymce'
import {
  addVoteComment1,
  addVoteComment2,
  deleteVoteComment1ById, deleteVoteComment2ById,
  getAllSections,
  getVoteById,
  getVoteCommentsById,
  getVoteResultsById,
  updateVoteContent
} from '../../api/communityHelp/vote'
// import tableRouter from '@/router/modules/table'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]

export default {
  components: {
    tinymce
  },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      const realVal = Number(value).toFixed(2)
      // num.toFixed(2)获取的是字符串
      return Number(realVal)
    }
  },
  data() {
    return {
      comment2InputFlag: false,
      newComment1Data: {
        commentId: null,
        voteId: null,
        userId: null,
        like: 0,
        date: null,
        content: null
      },
      newComment2Data: {
        commentId: null,
        comment1Id: null,
        userId: null,
        like: 0,
        date: null,
        content: null
      },
      sections: [],
      vote: {},
      voteOptions: {},
      linkGoodFlag: false,
      goodId: '',
      goods: [
        {
          id: '1',
          name: '东北大米',
          image_path: '165d74e2b3f17776.png',
          num: 10
        },
        {
          id: '2',
          name: '菜籽油',
          image_path: '165d74e2b3f17776.png',
          num: 30
        },
        {
          id: '3',
          name: '苹果',
          image_path: '165d74e2b3f17776.png',
          num: 70
        }
      ],
      goodDetail: {
        id: '',
        name: '',
        image_path: '',
        num: null
      },
      voteCount: 35,
      voteDetail: false,
      // voteOptions: [
      //   {
      //     content: '大米',
      //     num: 23,
      //     url: 'dami.jpg'
      //   },
      //   {
      //     content: '小米',
      //     num: 5,
      //     url: 'xiaomi.jpg'
      //   },
      //   {
      //     content: '面粉',
      //     num: 7,
      //     url: 'mianfen.jpg'
      //   }
      // ],
      contentList: [
        {
          id: 1,
          name: 'aaa',
          vote: '大米',
          time: '1天前'
        },
        {
          id: 3,
          name: 'bbb',
          vote: '小米',
          time: '3天前'
        },
        {
          id: 3,
          name: 'ccc',
          vote: '面粉',
          time: '2天前'
        },
        {
          id: 4,
          name: 'ddd',
          vote: '大米',
          time: '1天前'
        }
      ],
      pickerOptions: {
        // 禁言快捷的时间选择
        shortcuts: [
          {
            text: '一天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一个月',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      punishFlag: false, // 处理dialog显示控制
      punishForm: {
        isDelete: false,
        isMute: false,
        MuteUntill: null,
        punishMemo: ''
      },
      statusFlag: true,
      dialogStatusFlag: null,
      accuseFlag: false,
      accuseForm: {
        articleId: null,
        accuseType: null,
        accuseMemo: '',
        accuserId: null
      },
      accuseFormRules: {
        accuseType: [{ required: true }]
      },
      statusOptions: [
        {
          label: '已完成',
          value: '已完成'
        },
        {
          label: '投票中',
          value: '投票中'
        },
        {
          label: '采购中',
          value: '采购中'
        }
      ],
      editFlag: false,
      comment: '',
      contentTitle: '下期主食采购，征集意见',
      content: `东北大米主要有五个特点：
        1、颗粒饱满，质地坚硬，色泽清白透明。
        2、长粒型，支链淀粉含量高，饭粒油亮，香味浓郁。
        3、蒸煮后出饭率高，粘性较小，米质较脆。
        4、有丰富的蛋白质、脂肪、维生素、矿物质等营养物质。
        5、横断面呈扁圆形，颜色白色透明的较多，也有半透明和不透明的。`,
      dialogContent: '',
      comments: [
        {
          username: 'passby',
          userId: 1,
          date: '2021-04-31 22:47:22',
          commentId: 1,
          message: '有别的大米吗',
          deleteFlag: false,
          commentInputFlag: false,
          comment_in_comment: [
            {
              username: '学生1',
              userId: 2,
              time: '2021-04-31 22:47:22',
              reply_to_username: 'passby',
              reply_to_userId: 1,
              c_in_c_msg: '你想要哪种',
              c_in_c_editorFlag: false
            },
            {
              username: 'passby',
              userId: 1,
              time: '2021-04-31 22:47:22',
              reply_to_username: '学生1',
              reply_to_userId: 2,
              c_in_c_msg: '我想要糯米',
              c_in_c_editorFlag: false
            }
          ]
        },
        {
          username: 'passby',
          userId: 1,
          date: '2021-04-31 22:47:22',
          commentId: 3,
          message: '谢谢分享',
          deleteFlag: false,
          commentInputFlag: false,
          comment_in_comment: null
        },
        {
          username: 'passby',
          userId: 1,
          date: '2021-04-31 22:47:22',
          commentId: 5,
          message: '这个大米质量怎么样',
          deleteFlag: false,
          commentInputFlag: false,
          comment_in_comment: null
        }
      ],
      editorOption: {
        placeholder: '请输入评论',
        modules: {
          toolbar: toolbarOptions // 工具栏设置
        }
      },
      commentInput: '',
      voteId: 0,
      voteResults: [],
      commentsList: []
    }
  },
  mounted() {
    this.voteId = this.$route.query.index
    getVoteById(this.voteId).then(response => {
      console.log(response)
      this.vote = response.helpVote
      this.voteOptions = response.helpVoteOptions
      this.voteOptions.forEach(item => {
        this.voteCount = this.voteCount + item.num
      })
      console.log(this.vote)
    })
    getAllSections().then(response => {
      this.sections = response
    })
    getVoteCommentsById(this.voteId).then(response => {
      console.log(response)
      this.commentsList = response
    })
  },
  computed: {
    replyTo() {
      return function(username) {
        return '回复' + username
      }
    },
    generateId() {
      return function(commentId) {
        const index = commentId - 1
        return 'commentEdit' + index
      }
    }
  },
  methods: {
    showVoteDetail() {
      this.voteDetail = !this.voteDetail
      getVoteResultsById(this.voteId).then(response => {
        this.voteResults = response
      })
    },
    showGoodDetail() {
      this.goods.forEach(item => {
        if (item.id === this.goodId) {
          this.goodDetail = item
        }
      })
      console.log(this.goodDetail.name)
    },
    editVote() {
      console.log(this.vote)
      updateVoteContent(this.vote).then(response => {
        console.log(response)
        if (response.code === 200) {
          this.$message.success('更新成功')
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    dialogShow() {
      this.editFlag = true
      this.dialogContent = this.content
      console.log(this.dialogStatusFlag)
    },
    gotobuttom() {
      window.scrollTo(
        0,
        document.documentElement.scrollHeight -
          document.documentElement.clientHeight
      )
    },
    dialogConfirm() {
      this.content = this.dialogContent
      this.statusFlag = this.dialogStatusFlag
      this.editFlag = false
    },
    addComment1() {
      this.newComment1Data.voteId = this.voteId
      addVoteComment1(this.newComment1Data).then(response => {
        if (response.code === 200) {
          this.$message.success('回复成功')
          getVoteCommentsById(this.voteId).then(response => {
            console.log(response)
            this.commentsList = response
          })
        } else {
          this.$message.error('回复失败')
        }
      })
      console.log('aaaa')
    },
    addComment2(comment1Id) {
      this.newComment2Data.comment1Id = comment1Id
      addVoteComment2(this.newComment2Data).then(response => {
        if (response.code === 200) {
          this.$message.success('回复成功')
          getVoteCommentsById(this.voteId).then(response => {
            console.log(response)
            this.commentsList = response
          })
        } else {
          this.$message.error('回复失败')
        }
      })
    },
    deleteComment1(id) {
      deleteVoteComment1ById(id).then(response => {
        if (response.code === 200) {
          this.$message.success('删除成功')
          getVoteCommentsById(this.voteId).then(response => {
            console.log(response)
            this.commentsList = response
          })
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    deleteComment2(id) {
      deleteVoteComment2ById(id).then(response => {
        if (response.code === 200) {
          this.$message.success('删除成功')
          getVoteCommentsById(this.voteId).then(response => {
            console.log(response)
            this.commentsList = response
          })
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    showInputComment(index) {
      const id = index - 1
      console.log(id)
      this.comments[id].commentInputFlag = true
      const targetId = 'commentEdit' + id
      console.log(targetId)
      document
        .getElementById(targetId)
        .scrollIntoView({ block: 'center', behavior: 'smooth' })
    },
    closeEdit(commentId) {
      if (this.comments[commentId - 1].commentInputFlag) {
        this.comments[commentId - 1].commentInputFlag = false
      }
    }
  }
}
</script>

<style >
#allDetail {
  width: 80%;
  margin: 15px auto;
}
.myDiv {
  width: 1200px;
  height: 60px;
  margin: 15px auto;
}
.title {
  color: #6d7e8d;
  padding-left: 100px;
  padding-top: 80px;
  padding-bottom: 35px;
  word-spacing: 1.5px;
  font-size: 20px;
}
.artInfoDiv {
  margin-right: 100px;
  margin-left: 80px;
  color: #6d7e8d;
  font-size: 16px;
  word-spacing: 3px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e2e4;
}
.artInfoDiv span {
  margin-left: 18px;
}
.artInfoDiv a {
  float: right;
}
#deleteCommentDiv {
  padding-left: 47px;
  margin-top: 10px;
  min-height: 120px;
  color: #a8afbb;
}
.artInfoDiv span i {
  margin-right: 10px;
}
.articleContainer {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.el-card {
  margin-top: 30px;
  padding: 0;
}
.card,
.editorCard {
  margin-top: 30px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}
.editor {
}
.editorCard {
  margin-bottom: 150px;
}
.editorContainer {
  padding: 15px 20px;
}
.submit {
  padding: 15px 20px;
}
.cardHeader {
  padding: 20px 40px;
  color: #647787;
  font-size: 14px;
  border-bottom: 1px solid #eef0f1;
}
.postStatus {
  position: relative;
  margin-left: 60%;
  height: 0;
  overflow: visible;
  width: 100%;
  transform: translate(0, -50px);
}
.articleContent {
  padding-top: 15px;
  margin-left: 100px;
  margin-right: 100px;
  padding-bottom: 40px;
  font-size: 16px;
  line-height: 23px;
  text-indent: 2em;
}
.comments {
  padding: 30px 40px;

  border-bottom: 1px solid #eef0f1;
}
.comments a {
  color: #46a6ff;
  font-size: 14px;
}
#cid {
  float: right;
}
#cdate {
  color: #a8afbb;
  font-size: 12px;
}

.message {
  padding-left: 47px;
  margin: 10px 0;
  min-height: 120px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef0f1;
  word-spacing: 0.2em;
  line-height: 1.5em;
}
.comment_in_comment {
  padding-left: 47px;
  margin: 10px 0;
}
.childComment {
  margin: 18px 0;
}
.c_in_c {
  padding-left: 55px;
  margin: 10px 0;
}
#dialogTable {
  margin: 0 35px;
}
#dialogEditor {
  width: 100%;
}
#dialogTable tr td:first-child {
  vertical-align: top;
  padding-top: 5px;
}
/*.ql-editor {*/
/*  min-height: 300px;*/
/*}*/
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
